<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>

    /* 方法1: */
    /*#dad {*/
    /*  width: 200px;*/
    /*  height: 200px;*/
    /*  background-color: aquamarine;*/
    /*  border: 1px solid;*/
    /*}*/

    /*#son {*/
    /*  width: 100px;*/
    /*  height: 100px;*/
    /*  background-color: blueviolet;*/
    /*  margin: 50px auto;      !* 上下间距需要计算*!*/
    /*}*/

    /* 方法2: flex布局 */
    #dad {
      width: 200px;
      height: 200px;
      background-color: aquamarine;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    #son {
      width: 100px;
      height: 100px;
      background-color: blueviolet;
    }


  </style>
</head>
<body>
<div id="dad">
  <div id="son">
  </div>
</div>
</body>
</html>
